<template>
  <div class="root">
    <Layout>
      <Sider hide-trigger>
        <div class="img-title" @click="$router.push('/assembly/index')">
          <img src="../../assets/logo_title.png">
        </div>
        <Menu :theme="theme2" width="200px" accordion="true">
          <Submenu name="1">
            <template slot="title">
              <Icon type="ios-paper" />
              Vue组件
            </template>
            <MenuItem name="1-1" to="/assembly/popbtn">弹出层</MenuItem>
            <MenuItem name="1-2" to="/assembly/debug">debug页</MenuItem>
          </Submenu>
          <Submenu name="2">
            <template slot="title">
              <Icon type="ios-people" />
              Js方法
            </template>
            <MenuItem name="2-1" to="/assembly/copy">复制方法</MenuItem>
            <MenuItem name="2-2" to="/assembly/createiframe">创建Iframe</MenuItem>
            <MenuItem name="2-3" to="/assembly/createiframe">时间格式化和补零</MenuItem>
            <MenuItem name="2-4" to="/assembly/useragent">判断系统版本信息</MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <Layout>
        <Header>记录了一些自己写的组件 <p>------这里主要是运用路由嵌套的写法</p></Header>
        <Content>
          <router-view></router-view>
        </Content>
        <Footer></Footer>
      </Layout>
    </Layout>
  </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      theme2: 'light'
    };
  },

  created() {},

  mounted() {},

  methods: {
    Jump() {
      this.$router.push('/assembly/popwindow');
    }
  }
};
</script>
<style>
  .ivu-menu-submenu-title-icon {
    right: 10px!important;
  }
  .ivu-menu-submenu-title {
    padding: 14px 16px!important;
  }
</style>
<style lang="less" scoped>
  .img-title {
    width: 100%;
    margin-bottom: 20px;
    img {
      display: block;
      margin: 0 auto;
      width: 80%;
    }
  }
  .ivu-layout {
    height: 100%;
  }
  .ivu-layout-header {
    line-height: normal;
    font-size: 26px;
    color: #17233d;
    p {
      padding-left: 120px;
      font-size: 16px;
      color: #999;
    }
    &:hover {
      animation: doudong 0.5s, 100ms;
    }
  }
  @keyframes doudong {
    0% {
      transform: translateX(0px);
      opacity: 1;
    }
    25% {
      transform: translateX(50px);
      opacity: 0.5;
    }
    50% {
      transform: translateX(25px);
      opacity: 1;
    }
    75% {
      transform: translateX(200px);
      opacity: 0.5;
    }
    100% {
      transform: translateX(0px);
      opacity: 1;
    }
  }
</style>
